<template>
	<view class="shoppingView">
		<header :style="'padding-top: '+height.top+'px;height: '+(44+height.top)+'px;'">
			<image :style="'height: '+(44+height.top)+'px;'" src="../../static/home/4.png" mode="aspectFill"></image>
			<view :style="'height: '+height.height+'px;top: '+height.top+';'">
				<span>购物车</span>
			</view>
		</header>
		<nav>购物车 ({{list.length}})
			<span @click="alter">{{state?'管理':'完成'}}</span>
		</nav>
		<view class="list" v-for="val in list" :key="val.id" @click="select(val)">
			<p :class="{'optFor':optFor.some(value => value.id==val.id)}">
				<image mode="widthFix" src="../../static/home/27.png"></image>
			</p>
			<main>
				<image :src="URLimg+val.goods_info.image" mode="aspectFill"></image>
				<view class="introduce">
					<p>{{val.goods_info.name}}</p>
					<span>库存：{{val.stock}}</span>
					<view>
						<span><text>￥</text>{{val.sell_price}}</span>
						<p @click.stop>
							<span @click="minus(val)">
								<u-icon name="minus" color="#9E9E9E" size="20"></u-icon>
							</span>
							<i></i>
							<input @input="input(val)" v-model="val.num" type="number" />
							<i></i>
							<span @click="plus(val)">
								<u-icon name="plus" color="#9E9E9E" size="20"></u-icon>
							</span>
						</p>
					</view>
				</view>
			</main>
		</view>
		<footer>
			<p @click="all">
				<span :class="{'optFor':optFor.length==list.length&&list.length}">
					<image mode="widthFix" src="../../static/home/27.png"></image>
				</span>全选
			</p>
			<main>
				<view>
					<p v-if="state">合计：<text>￥</text><span>{{price}}</span></p>
					<span>已选{{optFor.length}}件</span>
				</view>
				<p @click="spik" v-if="state">结算</p>
				<p @click="apifun.showModal('购物车','是否确定删除商品？',delShoppingCart)" v-if="!state">删除</p>
			</main>
		</footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: true,
				URLimg: this.URLimg,
				apifun: this.apifun,
				height: {},
				price: 0,
				list: [],
				optFor: [],
			};
		},
		onShow() {
			this.optFor = []
			this.prices()
			this.getShoppingCart()
			this.height = uni.getStorageSync('header')
		},
		methods: {
			delShoppingCart() {
				if (!this.optFor.length) {
					return this.apifun.toast('请选择商品')
				}
				let id=[]
				this.optFor.forEach(val=>{
					id.push(val.id)
				})
				this.apifun.unirequest('/api/order/delShoppingCart', 'post', {
					id,
				}, (res) => {
					this.optFor=[]
					this.getShoppingCart()
					this.apifun.toast('成功删除商品')
				})
			},
			getShoppingCart() {
				this.apifun.unirequest('/api/order/getShoppingCart', 'post', {}, (res) => {
					this.list=res.data
				})
			},
			setShoppingCart(val) {
				this.apifun.unirequest('/api/order/setShoppingCart', 'post', {
					id:val.id,
					num:val.num,
				},()=>{},false,true)
			},
			spik() {
				if (!this.optFor.length) {
					return this.apifun.toast('请选择商品')
				}
				uni.setStorageSync('shopping', this.optFor)
				uni.navigateTo({
					url: '/pages/homeList/calculate/calculate'
				});
			},
			prices() {
				this.price = 0
				this.optFor.forEach(val => {
					this.price += Number(val.num) * Number(val.goods_info.sell_price)
				})
			},
			input(val) {
				clearTimeout(this.Timeout)
				this.Timeout = setTimeout(() => {
					if (Number(val.num) > Number(val.stock)) {
						val.num = Number(val.goods_info.stock)
					}
					if (Number(val.num) < 1) {
						val.num = 1
					}
					this.setShoppingCart(val)
					this.prices()
				}, 1500)
			},
			minus(val) {
				if (Number(val.num) > 1) {
					val.num = Number(val.num) - 1
					this.setShoppingCart(val)
					this.prices()
				}
			},
			plus(val) {
				if (Number(val.num) < Number(val.goods_info.stock)) {
					val.num = Number(val.num) + 1
					this.setShoppingCart(val)
					this.prices()
				}
			},
			all() {
				if (this.list.length != this.optFor.length) {
					this.optFor = []
					this.list.forEach(val => {
						this.optFor.push(val)
					})
				} else {
					this.optFor = []
				}
				this.prices()
			},
			select(val) {
				if (this.optFor.some(value => value.id == val.id)) {
					let ins = this.optFor.findIndex(value => value.id == val.id)
					this.optFor.splice(ins, 1)
				} else {
					this.optFor.push(val)
				}
				this.prices()
			},
			alter() {
				this.state = !this.state
				this.optFor = []
				this.prices()
			},
		},
	};
</script>

<style lang="scss">
	.shoppingView {
		padding-bottom: 200rpx;

		&>footer {
			width: 100%;
			height: 160rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			z-index: 9999;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&>main {
				display: flex;
				align-items: center;

				&>view {
					margin-right: 36rpx;

					&>p {
						font-size: 15px;
						color: #9E9E9E;

						&>text {
							font-size: 12px;
							color: #9E190F;
						}

						&>span {
							display: inline-block;
							font-size: 20px;
							color: #9E190F;
							font-weight: bold;
						}
					}

					&>span {
						font-size: 13px;
						color: #9E9E9E;
					}
				}

				&>p {
					width: 234rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #9E190F;
					color: #fff;
					font-size: 14px;
					border-radius: 45rpx;
				}
			}

			&>p {
				display: flex;
				align-items: center;
				font-size: 15px;
				color: #9E9E9E;

				&>.optFor {
					background-color: #D31E11 !important;
				}

				&>span {
					width: 40rpx;
					height: 40rpx;
					background-color: #DFDFDF;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 18rpx;

					&>image {
						width: 26rpx;
						opacity: 1;
						@include cssimg;
					}
				}
			}
		}

		&>.list {
			width: 690rpx;
			height: 228rpx;
			margin: 0 auto 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&>main {
				width: 608rpx;
				height: 228rpx;
				background-color: #fff;
				border-radius: 30rpx;
				padding: 30rpx 20rpx 30rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				&>.introduce {
					flex: 1;
					height: 100%;

					&>p {
						height: 68rpx;
						line-height: 34rpx;
						font-size: 24rpx;
						font-weight: bold;
						@include csstext(2);
					}

					&>span {
						font-size: 28rpx;
						color: #9E9E9E;
						display: block;
						margin: 10rpx 0;
					}

					&>view {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						&>span {
							color: #D31E11;
							font-size: 18px;
							font-weight: bold;

							&>text {
								font-size: 12px;
							}
						}

						&>p {
							width: 160rpx;
							height: 50rpx;
							display: flex;
							align-items: center;
							background: #EBEBEB;
							border-radius: 10rpx;

							&>input {
								flex: 1;
								height: 100%;
								font-size: 14px;
								text-align: center;
							}

							&>i {
								width: 1px;
								height: 34rpx;
								background: #D8D8D8;
							}

							&>span {
								width: 46rpx;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}

				&>image {
					width: 172rpx;
					height: 172rpx;
					@include cssimg;
					border-radius: 30rpx;
					margin-right: 12rpx;
				}
			}

			&>p {
				width: 40rpx;
				height: 40rpx;
				background-color: #DFDFDF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				&>image {
					width: 26rpx;
					opacity: 1;
					@include cssimg;
				}
			}

			&>.optFor {
				background-color: #D31E11 !important;
			}
		}

		&>nav {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-weight: bold;
			padding: 0 46rpx 0 30rpx;
			box-sizing: border-box;

			&>span {
				color: #666666;
			}
		}

		&>header {
			width: 750rpx;
			margin: 0 auto;
			position: sticky;
			top: 0;
			z-index: 999;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			&>view {
				width: 690rpx;
				z-index: 999;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				&>span {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 18px;
					font-weight: bold;
				}

				&>.u-icon {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&>image {
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 998;
				@include cssimg;
			}
		}
	}
</style>